<style lang="scss" scoped>
    .ivu-article .ivu-select li {
    	margin-bottom: 0;
    }

    .ivu-article .ivu-select ul {
    	padding-left: 0 !important;
    	list-style-type: none;
    }
</style>
<template>
    <i-article>
        <article>
            <seamless-brief>
                <Alert show-icon style="margin-top: 16px">
                    <code>import { pagination } from 'kzjr_ui'</code>
                    <br/>
                    <br/>
                    <code>Vue.use(pagination)</code>                    
                </Alert>
            </seamless-brief>
            <Demo title="分页" :vertical="true">
                <div slot="demo">
                    <kzjr-pagination @page-change="pageChange" :current="currrnt" :total="100" :limit="10"></kzjr-pagination>
                </div>
                <div slot="desc">
                    <p>基本用法。默认参数</p>
                </div>
                <i-code lang="html" slot="code">{{ code }}</i-code>
            </Demo>
            <Table border :columns="columns1" :data="data1"></Table>
        </article>
    </i-article>
</template>
<script>
    import iArticle from '../../component/article.vue'
    import iCode from '../../component/code.vue'
    import Demo from '../../component/demo.vue'
    import Code from '../../code/pagination'
    import seamlessBrief from '../brief/kzjr.vue'
    import columns from '../../data-manage/columns'
    import Vue from 'vue'
    import { pagination } from 'kzjr_ui'

    Vue.use(pagination)
    export default {
        components: {
            iArticle,
            iCode,
            Demo,
            seamlessBrief
        },
        data () {
            return {
                code: Code,
                currrnt: 1,
                columns1: columns,
                data1: [
                    {
                        key1: 'current',
                        key2: '当前页码',
                        key3: '[Number, String]',
                        key4: '——',
                        key5: 1
                    },
                    {
                        key1: 'total',
                        key2: '总数据量',
                        key3: '[Number, String]',
                        key4: '——',
                        key5: 0
                    }, {
                        key1: 'limit',
                        key2: '每页数据量pageSize',
                        key3: '[Number, String]',
                        key4: '——',
                        key5: 10
                    }, {
                        key1: '@page-change',
                        key2: '点击事件回调',
                        key3: 'function(index) {} 点击页码值',
                        key4: '——',
                        key5: '__'
                    }
                ]
            }
        },
        methods: {
            pageChange (n) {
                console.log(n)
                this.currrnt = n
            }
        }
    }
</script>